import React ,{ Component } from "react";
import Switch from 'react-switch'
import './style/aside.css';

class Aside extends Component{
    constructor(props){
        super(props);
        this.state = {
            checked:false,
            gate:'自动',
            level:1,
            type:'碳钢',
            method:'射频波',
            range: '1X',
            temperature: '49'
        };
        this.switchChange = this.switchChange.bind(this);
    }

    switchChange(checked){
        this.setState({
            checked,
        })
    }

    render(){
        return(
            <aside className="aside_area">
                <ul>
                    <li className="manual_item">
                        <span>自动增强</span>
                        <Switch onChange={this.switchChange}
                                checked={this.state.checked}
                                checkedIcon={false}
                                uncheckedIcon = {false}
                                height={24}
                        ></Switch>
                    </li>
                    <li className="manual_item">
                        <span>平均等级</span>
                        <span className="like_btn">{this.state.level}</span>
                    </li>
                    <li className="manual_item">
                        <span>材料类型</span>
                        <span className="like_btn">{this.state.type}</span>
                    </li>
                    <li className="manual_item">
                        <span>检波方式</span>
                        <span className="like_btn">{this.state.method}</span>
                    </li>
                    <li className="manual_item">
                        <span>范围扩展</span>
                        <span className="like_btn">{this.state.range}</span>
                    </li>
                    <li className="manual_item">
                        <span>工作温度</span>
                        <span className="like_btn">{this.state.temperature}℃</span>
                    </li>
                </ul>
            </aside>
        )
    }
}

export default Aside;